<template>
  <div class="table-card">
    <el-table
    :data="tableData"
    stripe
    style="width: 100%">
        <el-table-column
        prop="id"
        label="产品编号"
        width="160">
        </el-table-column>
        <el-table-column
        prop="date"
        label="日期"
        width="160">
        </el-table-column>
        <el-table-column
        prop="name"
        align="center"
        label="产品名称">
        </el-table-column>
         <el-table-column
        prop="price"
        label="价格"
        width="80">
            <template #default="scope">
                ￥{{scope.row.price}}
            </template>
        </el-table-column>
        <el-table-column
        prop="state"
        label="状态"
        width="80">
            <template #default="scope">
                <el-tag
                    :type="scope.row.state === '售空' ? 'danger' : 'success'"
                    disable-transitions>{{scope.row.state}}</el-tag>
            </template>
        </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { reactive } from 'vue'
export default {
    name: 'TableCard',
    setup(){
        const tableData = reactive([
            {
                id: '#167534232332',
                date: "2021-01-22 17:45:00",
                name: '肥宅快乐水',
                price: '4.5',
                state: '售空'
            },
            {
                id: '#187334968932',
                date: "2020-07-12 22:35:10",
                name: '全家桶',
                price: '98',
                state: '销售中'
            },
            {
                id: '#167536885332',
                date: "2020-11-07 05:05:00",
                name: '肥宅薯片',
                price: '6',
                state: '销售中'
            },
            {
                id: '#71531232332',
                date: "2021-01-11 13:25:17",
                name: '五四模拟全套',
                price: '42',
                state: '售空'
            }
        ])

        return {tableData}
    }
}
</script>

<style>
.table-card{

}
</style>